<template>
  <div>
    <el-row class="nav">
      <i class="el-icon-arrow-left"
         @click="goBack"></i>
      <span class="font-weight">{{$store.state.systemTypeName}}</span>
    </el-row>
    <el-divider></el-divider>
    <el-form>
      <el-form-item label="字段类型："
                    :label-width="formLabelWidth">
        <el-select v-model="basicValue"
                   placeholder="请选择"
                   :disabled="$store.state.isSystemField"
                   @change='getBasicInfo'
                   size="mini">
          <el-option v-for="item in basicOptions"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-tabs v-model="activeName"
                 v-if='currentOptions'>
          <el-tab-pane label="字段属性"
                       name="basicValue">
            <el-row>
              <widget-config v-if="currentOptionsList"
                             :data="currentOptionsList"
                             :configInfo="currentOptionsConfig"
                             :dataListInfo='dataList'
                             :effectShow="effectShow"
                             @getJsonData="getJsonData"></widget-config>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { selectContentById, updateContent, createCustomfield } from '@/api/customField.js'
import { basicOptions } from '@/common/opntionsData.js'
import WidgetConfig from '@/components/formMaking/WidgetConfig'
import common from "@/common/common.js";
export default {
  data () {
    return {
      formLabelWidth: '90px',
      effectShow: false,
      basicValue: '',
      currentOptions: '',
      activeName: 'basicValue',
      basicOptions: basicOptions,
      dataList: [],
      currentOptionsList: '',
      currentOptionsConfig: '',
      form: {
        value: '',
        label: ""
      },
    }
  },
  watch: {
    basicValue (n, o) {
      this.basicValue = n
    },
    currentOptionsList (newVal, oldVal) {
      // 更新字段标识
      this.currentOptionsList = newVal
      let formData = JSON.parse(sessionStorage.getItem('formData'))
      this.fielfType = formData.type
      this.fielfOption = formData.option
      if (this.fielfType == 1 && formData.option == 1) {
        const key = new Date().getTime() + ''
        this.currentOptionsList.remoteFunc = 'func_' + key
        this.currentOptionsList.remoteOption = 'option_' + key
        this.currentOptionsList.model = this.currentOptionsList.type + '_' + key
      }


    }
  },
  components: {
    WidgetConfig
  },
  computed: {
  },
  mounted () {
    if (this.$store.state.customFieldId) {
      this.getCustomFieldInfo()
    }
  },
  methods: {
    // 获取详情
    getCustomFieldInfo () {
      let id = this.$store.state.customFieldId
      let _this = this
      selectContentById(id).then(res => {
        if (res.data.retCode === 200) {
          let customFiledInfo = res.data.data
          // _this.currentOptions = {
          //   'list':customFiledInfo
          // }
          let formData = {
            type: 2,
            option: 2,
            widgetForm: customFiledInfo
          }
          sessionStorage.setItem('formData', JSON.stringify(formData))
          _this.currentOptions = customFiledInfo
          _this.currentOptionsList = common.deepClone(this.currentOptions.list[0])
          _this.currentOptionsConfig = common.deepClone(this.currentOptions.config)
          _this.basicValue = customFiledInfo.list[0].type
          _this.dataList = customFiledInfo.list[0].options.remoteOptions
        }
      })
    },
    // 获取属性设置的数据
    getJsonData (data) {
      if (!data.dataSign) {
        data.dataSign = ''
      }
      // data.model = data.dataSign
      let paramsNew = {
        userId: this.$store.state.userId,
        dataSign: data.dataSign,
        content: {
          list: [data],
          config: this.currentOptions.config
        },
      }
      let paramsOld = {
        userId: this.$store.state.userId,
        dataSign: data.dataSign,
        content: {
          list: [data],
          config: this.currentOptions.config
        },
        id: this.$store.state.customFieldId,
        name: data.name
      }
      if (this.$store.state.customFieldId) { // 编辑
        updateContent(paramsOld).then(res => {
          if (res.data.retCode === 200) {
            this.$message({
              type: 'success',
              message: res.data.msg
            })
            this.$router.push('./customField')
          } else {
            this.$message({
              type: 'error',
              message: res.data.msg
            })
          }
        })
      } else { // 新建
        createCustomfield(paramsNew).then(res => {
          if (res.data.retCode === 200) {
            this.$message({
              type: 'success',
              message: res.data.msg
            })
            this.$router.push('./customField')
          } else {
            this.$message({
              type: 'error',
              message: res.data.msg
            })
          }
        })
      }
    },
    goBack () {
      this
        .$router
        .push("/customField");
    },
    getBasicInfo (val) {
      this.currentOptions = ''
      this.effectShow = true
      for (var i in basicOptions) {
        if (val == basicOptions[i].value) {
          this.currentOptions = basicOptions[i].list
          this.currentOptionsList = common.deepClone(this.currentOptions.list[0])
          this.currentOptionsConfig = common.deepClone(this.currentOptions.config)
        }
      }
    }
  }
}
</script>

<style scoped>
>>> .el-divider--horizontal {
  margin: 10px 0;
}
>>> .el-input {
  /* width:50%; */
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
/* >>> .el-form-item__content {
  white-space: nowrap;
} */
>>> .el-form-item__label {
  text-align: left;
}
</style>
